<template>
  <view class="container">
    <view class="title">🏆 排行榜</view>

    <view class="rank-list">
      <view
        class="rank-item"
        :class="{'first-place': index === 0}"
        v-for="(item, index) in rankData"
        :key="item.id"
      >
        <view class="rank">{{ index + 1 }}</view>
        <view class="name">{{ item.name }}</view>
        <view class="score">{{ item.score }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rankData: [
        { id: 1, name: '张三', score: 98 },
        { id: 2, name: '李四', score: 95 },
        { id: 3, name: '王五', score: 92 },
        { id: 4, name: '赵六', score: 89 },
        { id: 5, name: '钱七', score: 85 }
      ]
    };
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.rank-list {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.rank-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #eee;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank {
  width: 60rpx;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  color: #888;
}

.name {
  flex: 1;
  font-size: 32rpx;
  padding-left: 20rpx;
  color: #333;
}

.score {
  font-size: 32rpx;
  color: #ff6600;
}

.first-place {
  background-color: #fffbe6;
  color: #d4a000;
  font-weight: bold;
}
</style>
